<template>
    <div class="main">
        <div class="main_header">
            <div class="main_tab" :style="{ width: headerTabWidth + 'px' }"> </div>
            <div class="header_type" :style="{ width: headerTypeWidth + 'px' }">实验室</div>
            <div class="header_id" :style="{ width: headerIdWidth + 'px' }">机房</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">1-2</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">3-5</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">6-7</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">8-9</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">10-12</div>
            <div class="header_course" :style="{ width: headerCourseWidth + 'px' }">13-15</div>

        </div>
        <div class="main_body">
            <div class="body_icon" v-for="item in msg" :key="item.week">
                <div class="icon_week">
                    {{ getWeek(item.week) }}
                </div>
                <div class="icon_list" v-if="item.labList.length">
                    <div class="list_detail" v-for="lab in item.labList" :key="lab.id">
                        <div class="detail_type">
                            {{ lab.labType }}
                        </div>
                        <div class="detail_id">
                            {{ lab.id }}
                        </div>
                        <div class="detail_course">
                            <!-- <div class="course_list" v-for="(course, index) in lab.courseList" :key="index">
                                <div class="course_list_detail">
                                    <div v-if="course.courseName">课程：{{ course.courseName }}</div>
                                    <div v-if="course.courseHost">老师：{{ course.courseHost }}</div>
                                    <div v-if="course.courseTeam">班级：{{ course.courseTeam }}</div>
                                    <div v-if="course.courseCover">周次：{{ course.courseCover }}</div>
                                </div>
                            </div> -->
                            <div class="course_list" v-for="(courseTime, index) in dayCourse" :key="index">
                                <!-- {{ courseTime.courseTime }} -->
                                <div class="course_list" v-for="(course, index) in lab.courseList" :key="index" v-if="course.courseNo===courseTime.courseTime">
                                        <div class="course_list_detail">
                                            <div v-if="course.courseName">课程：{{ course.courseName }}</div>
                                            <div v-if="course.courseHost">老师：{{ course.courseHost }}</div>
                                            <div v-if="course.courseTeam">班级：{{ course.courseTeam }}</div>
                                            <div v-if="course.courseCover">周次：{{ course.courseCover }}</div>
                                        </div>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="icon_list_else" v-else>
                    暂无数据
                </div>
            </div>
        </div>
    </div>
</template>


<script>
/**
 * 第一层数据
 * @param semester 学期 1-上半学期 2-下半学期
 * @param week 星期几
 * @param weekNum 第几周
 * @param labList 实验室列表
 */

/**
 * 第二层数据（labList）
 * @param id 实验室编号
 * @param labType 实验室类型
 * @param courseList 实验室课程列表
 *  */

/**
 * 第三层数据（courseList）
 * @param courseNo 第几节课
 * @param courseName 课程名称
 * @param courseHost 教师名称
 * @param courseTeam 课程班级
 * @param courseCover 课程周次（第几周到第几周）
 * 
 * 
 */

export default {
    data() {
        return {
            headerTabWidth: 0,
            headerTypeWidth: 0,
            headerIdWidth: 0,
            headerCourseWidth: 0,
            dayCourse: [{
               courseTime:"1-2"
            },{
               courseTime:"3-5"
            },{
               courseTime:"6-7"
            },{
               courseTime:"8-9"
            },{
               courseTime:"10-12"
            },{
               courseTime:"13-15"
            }]
        }
    },
    methods: {
        getWeek(week) {
            switch (week) {
                case 1: return "星期一"
                case 2: return "星期二"
                case 3: return "星期三"
                case 4: return "星期四"
                case 5: return "星期五"
                case 6: return "星期六"
                case 7: return "星期天"
                default:
                    return "星期一"
            }
        },
        updateWidth() {
            //在下一个 DOM 更新周期中执行，确保元素已经正确渲染完成，然后再去获取它们的宽度。
            this.$nextTick(() => {
                // 获取元素的宽度
                const iconWeekElements = this.$el.querySelectorAll('.icon_week');
                this.headerTabWidth = iconWeekElements[0].getBoundingClientRect().width;

                const detailTypeElements = this.$el.querySelectorAll('.detail_type');
                this.headerTypeWidth = detailTypeElements[0].getBoundingClientRect().width;

                const detailIdElements = this.$el.querySelectorAll('.detail_id');
                this.headerIdWidth = detailIdElements[0].getBoundingClientRect().width;

                const detailCourseElements = this.$el.querySelectorAll('.course_list');
                this.headerCourseWidth = detailCourseElements[0].getBoundingClientRect().width;
            });
        },
        handleResize() {
            this.updateWidth(); // 窗口大小改变时更新宽度
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.updateWidth();
            window.addEventListener('resize', this.handleResize); // 监听窗口大小改变事件
        });
    },
    destroyed() {
        window.removeEventListener('resize', this.handleResize); // 组件销毁前移除事件监听
    },
    watch: {
        // 监听msg属性的变化
        msg: {
            handler: function(newVal, oldVal) {
                // 当msg发生变化时执行相应操作
                this.updateWidth(); // 更新宽度
            },
            deep: true // 深度监听，以便监听msg数组内部对象的变化
        }
    },
    props: {
        msg: Array
    }

}
</script>

<style lang="scss" scoped>
.main {
    //background:green;
    height: 80vh;
    width: 80vw;
    border: solid #1a9e53 0.1vw;
    overflow: hidden;
    /**
    * 表头区域
    */
    .main_header {
        height: 4vh;
        width: 100%;
        // background: red;
        border-bottom: solid #1a9e53 0.1vw;
        display: flex;

        .main_tab {
            //width: 2.986vw;
            height: 100%;
            border-right: solid #1a9e53 0.1vw;
            box-sizing: border-box;
        }

        .header_type {
            //width: 7.666vw;
            height: 100%;
            border-right: solid #1a9e53 0.1vw;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }

        .header_id {
            //width: 3.832vw;
            height: 100%;
            border-right: solid #1a9e53 0.1vw;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }

        .header_course {
            //width: 10.76vw;
            height: 100%;
            border-right: solid #1a9e53 0.1vw;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }
    }

    /**
    * 表体区域
    */
    .main_body {
        height: 76.2vh;
        width: 100%;
        //background: pink;
       // overflow-y: scroll;

        .body_icon {
            height: 100%;
            width: 100%;
            border-bottom: solid #1a9e53 0.1vw;
            display: flex;
            //background: black;

            //星期几
            .icon_week {
                height: 100%;
                width: 3vw;
                font-size: 0.8vw;
                //background: green;
                display: flex;
                justify-content: center;
                /* 水平居中 */
                align-items: center;
                /* 垂直居中 */
                border-right: solid #1a9e53 0.1vw;
                box-sizing: border-box;
            }

            .icon_list {
                height: 100%;
                width: 77vw;
                //background: yellow;
                overflow-y: scroll;
                display: flex;
                flex-direction: column;

                .list_detail {
                    width: 100%;
                    flex: 1; /* 让每个子元素平均分布剩余的空间 */
                    border-bottom: solid #1a9e53 0.1vw;
                    display: flex;
                    

                    .detail_type {
                        height: 100%;
                        width: 8vw;
                        // background: yellow;
                        border-right: solid #1a9e53 0.1vw;
                        font-size: 0.8vw;
                        display: flex;
                        justify-content: center;
                        /* 水平居中 */
                        align-items: center;
                        /* 垂直居中 */
                    }

                    .detail_id {
                        height: 100%;
                        width: 4vw;
                        border-right: solid #1a9e53 0.1vw;
                        display: flex;
                        justify-content: center;
                        /* 水平居中 */
                        align-items: center;
                        /* 垂直居中 */
                    }

                    .detail_course {
                        height: 100%;
                        width: 65vw;
                        display: flex;

                        //background: yellow;
                        .course_list {
                            height: 100%;
                            width: 10.833vw;
                            //background: yellow;
                            border-right: solid #1a9e53 0.1vw;

                            .course_list_detail {
                                font-size: 0.8vw;
                                height: 100%;
                                width: 100%;
                                overflow: hidden;
                                /* 隐藏溢出的内容 */
                                text-overflow: ellipsis;
                                /* 显示省略号 */
                            }
                        }
                    }
                }
            }
            .icon_list_else{
                //background-color: red;
                height: 100%;
                width: 100%;
                font-size: 4vw;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /* 自定义滚动条样式 */
            .icon_list::-webkit-scrollbar {
                width: 0vw;
                /* 设置滚动条宽度 */
            }

            .icon_list::-webkit-scrollbar-track {
                background: transparent;
                /* 设置滚动条背景 */
            }

            .icon_list::-webkit-scrollbar-thumb {
                background: rgb(180, 177, 177);
                /* 设置滚动条滑块颜色 */
                border-radius: 6px;
                /* 设置滑块圆角 */
            }
        }
    }

    /* 自定义滚动条样式 */
    .main_body::-webkit-scrollbar {
        width: 0.3vw;
        /* 设置滚动条宽度 */
    }

    .main_body::-webkit-scrollbar-track {
        background: transparent;
        /* 设置滚动条背景 */
        border-left: solid #1a9e53 0.1vw;
        border-top: solid #1a9e53 0.1vw;
    }

    .main_body::-webkit-scrollbar-thumb {
        background: rgba(26, 26, 27, 0.299);
        /* 设置滚动条滑块颜色 */
        border-radius: 6px;
        /* 设置滑块圆角 */
    }
}
</style>